<template>
  <div class="fc-style">
    <div class="fc-title">
      <left-outlined @click="onJump" />
      设计流程{{ processName }}
    </div>
    <a-layout class="fc-container">
      <a-layout-header class="fc-header">
        <div>
          <span style="margin-left: 15px">缩放</span>
          <a-button @click="augment('shrink')" type="link">-</a-button>
          <span>{{ scale }}%</span>
          <a-button @click="augment('enlarge')" type="link">+</a-button>
        </div>
        <FlowHeader :flowData="flowData" @aaa="aaa"></FlowHeader>
      </a-layout-header>
      <a-layout-content class="fc-main">
        <a-layout>
          <a-layout class="center-container">
            <a-layout-content class="widget-empty">
              <Panel :flowData="flowData" ref="panelRef" @clickNodeId="clickNodeId"></Panel>
            </a-layout-content>
          </a-layout>
          <!-- <a-layout-sider theme="light" class="widget-config-container" :width="500">
            <a-layout>
              <a-layout-header>
                <div class="config-tab" :class="{ active: configTab === 'node' }" @click="configTab = 'node'">节点属性</div>
                <div class="config-tab" :class="{ active: configTab === 'flow' }" @click="configTab = 'flow'">流程属性</div>
              </a-layout-header>
              <a-layout-content class="config-content">
                <NodeFormTabs v-model:_nodeId="_nodeId" v-model:flowData="flowData" v-show="configTab === 'node'"
                  @updataFlowData="updataFlowData" />
                <FlowAttribute v-if="configTab === 'flow'" :flowData="flowData" @updataFlowData="updataFlowData" />
              </a-layout-content>
            </a-layout>
          </a-layout-sider> -->
        </a-layout>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup>
import { defineComponent, reactive, toRefs, ref, provide, h, watch, onMounted } from "vue";
import { LeftOutlined } from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import FlowHeader from "@/components/flowDesign/flowCommon/FlowHeader.vue";
import FlowAttribute from "@/components/flowDesign/flowCommon/FlowAttribute.vue";
import NodeFormTabs from "@/components/flowDesign/flowCommon/nodeFormTabs.vue";
import Panel from "@/components/flowDesign/flowNode/panel.vue";
import { dataA } from "@/components/flowDesign/dicts/data_a.js";
import { dataB } from "@/components/flowDesign/dicts/data_B.js";
import { useRoute, useRouter } from "vue-router";
// import { tabsStore } from "@manage/wrs-common/stores/tabs";
// import { flowGetDataApi } from "@/api/flowManager.js"; //接口
import { getUUID, nodeTypeProcessing } from "@/components/flowDesign/dicts/utils.js";

import "./styles/index.less";
import "./styles/antd.less";

const configTab = ref("node");
const widgetForm = ref();
const panelRef = ref();
// 通过点击节点获取到的nodeId
const _nodeId = ref();
const clickNodeId = (nodeId) => {
  console.log("index发送了节点id", nodeId);
  _nodeId.value = nodeId;
};
/**
 * 整个流程图属性
 */
const route = useRoute();
const router = useRouter();
const processId = ref("10");
// const processId = ref(route.query.processId);
const flowData = ref({
  lineList: [],
  nodeList: []
});
const updataFlowData = (value) => {
  flowData.value = value;
};

const load = async () => {
  // const res = await flowGetDataApi(processId.value);
  const res = {}
  if (res) {
    let defaultFlowData = {
      processId: processId.value,
      processKey: getUUID(6),
      processName: "",
      remark: null,
      version: 1,
      categoryId: 5,
      codeFormatId: 0,
      disabled: false,
    }
    let dataSource = res.nodeList ? res : { ...defaultFlowData, ...dataA };
    // let dataSource = res.nodeList ? dataB : { ...defaultFlowData, ...dataA };
    console.log(dataSource)
    flowData.value = nodeTypeProcessing(dataSource);
  }
};
const aaa = () => {
  setTimeout(() => {
    load()
  }, 1000)
}
/**
 * 缩放
 */
const scale = ref(100); // 缩放比例
const augment = (val) => {
  if (panelRef.value.baseZoom > 4.75) return;
  panelRef.value.cutSize(val);
  console.log(panelRef.value.baseZoom);
  scale.value = panelRef.value.baseZoom * 100;
};
/**
 * 关闭当前标签页
 *
 * */
const onJump = () => {
  Modal.confirm({
    title: "提示",
    content: `确定放弃未保存的内容并离开页面？`,
    icon() {
      return h("i", {
        class: "iconfont up-Attention"
      });
    },
    async onOk() {
      onReturn();
    }
  });
};

// const tabs = tabsStore();
const path = "/manageProcess";
const onReturn = () => {
  tabs.DELETE_TABSLIST(route.path);
  router.push({ path: path });
};
</script>
<style lang="less">
.gen-btn-bar-l {
  .ant-tabs>.ant-tabs-nav .ant-tabs-nav-wrap {
    justify-content: center;

    .ant-tabs-tab {
      padding: 0 0;

      .iconfont {
        position: relative;
        top: 4px;
      }
    }
  }
}
</style>
